<template>
  <div>
    <el-card class="box">
      <el-row>
        <el-col :span="7">
          <div class="money">
            <p>本月累计收益(万元)</p>
            <span>￥{{ state.allAmount }}</span>
          </div>
          <div class="day">
            <div class="kuai"></div>
            <span>今日新增收益</span>
            <span style="font-weight: bolder">{{ state.tadayAdded }}万元</span>
          </div>
          <div class="spend">
            <div class="kua"></div>
            <span>今日新增支出</span>
            <span style="font-weight: bolder">{{ state.tadaySub }}万元</span>
          </div>
          <div class="surplus">
            <div class="ku"></div>
            <span>今日剩余</span>
            <span style="font-weight: bolder">{{ state.tadayAmount }}万元</span>
          </div>
        </el-col>
        <el-col :span="17">
          <div id="main" style="width: 900px; height: 300px"></div>
        </el-col>
      </el-row>
    </el-card>
    <div class="box2">
      <el-card class="card">
        <div id="main1" style="width: 600px; height: 400px"></div>
      </el-card>
      <el-card class="card2">
        <el-calendar v-model="value" @click.native="changeDist" />
      </el-card>
    </div>
    <div class="box5">
      <div class="box3">
        <el-card class="card3">
          <div id="main2" style="width: 300px; height: 240px"></div>
        </el-card>
        <el-card class="card4">
          <div id="main3" style="width: 300px; height: 240px"></div>
        </el-card>
      </div>
      <div class="box4">
        <el-card>
          <div id="main4" style="width: 945px; height: 500px"></div>
        </el-card>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="state.tableData" border>
      <el-table-column label="序号" type="index" />
      <el-table-column prop="province" label="省份" />
      <el-table-column prop="city" label="城市" />
      <el-table-column prop="coverage" label="覆盖率" />
      <el-table-column prop="coverage" label="今日应收" />
      <el-table-column prop="receivable" label="今日实收" />
      <el-table-column prop="actual" label="今日结余" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-wordcloud";
import {
  getCharts,
  getAmount,
  getPie,
  getWord,
  getMap,
  getTable,
  getTab,
} from "@/http/api";
import "echarts/extension/bmap/bmap";
// import BaiduMap from "@/components/BaiduMap.vue";
const value = ref(new Date());

const state = reactive({
  //柱状数据
  allAmount: 0,
  tadayAdded: 0,
  tadaySub: 0,
  tadayAmount: 0,
  tableData: [],
});

onMounted(() => {
  list();
  dist();
  pie();
  wordcloud();
  // map();
  a();
  tab();
  table();
});
//柱状图
const arr = [];
const amout = [];
const arr2 = [];
const list = async () => {
  const { data } = await getCharts();
  const { dailyCurve } = data;
  const { monthAmountList } = data;
  state.allAmount = data.allAmount;
  state.tadayAdded = data.tadayAdded;
  state.tadaySub = data.tadaySub;
  state.tadayAmount = data.tadayAmount;
  dailyCurve.forEach((item) => {
    arr.push(item.time);
    amout.push(item.amount);
  });

  monthAmountList.forEach((item) => {
    arr2.push(item.amount);
  });
  // console.log(555, data);
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));
  var option = reactive({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      data: ["月累计收益", "日累计收益"],
    },
    xAxis: [
      {
        data: arr,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "Precipitation",
        min: 0,
        max: 170,
        interval: 30,
        axisLabel: {
          formatter: "{value} 万元",
        },
      },
    ],
    series: [
      {
        name: "月累计收益",
        type: "bar",
        barWidth: 20,
        tooltip: {
          valueFormatter: function (value) {
            return value + " 万元";
          },
        },
        itemStyle: {
          color: "#5a6fc0",
        },

        data: amout,
      },

      {
        name: "日累计收益",
        type: "line",
        smooth: 0.4,
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value) {
            return value + "万元";
          },
        },
        itemStyle: {
          normal: {
            color: "#a0d1da",
          },
          lineStyle: {
            color: "#a0d1da",
          },
        },
        data: arr2,
      },
    ],
  });
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};
//条形图
// 基于准备好的dom，初始化echarts实例
const dist = async (time) => {
  const {
    data: { result },
  } = await getAmount(time);
  const timeStr = result.map((v) => v.timeStr).reverse();
  const income = result.map((v) => v.income);
  const expense = result.map((v) => v.expense);
  const balance = result.map((v) => v.balance);
  let myChart = echarts.init(document.querySelector("#main1"));
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["收益(万元)", "支出(万元)", "结余(万元)"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",
      },
    ],
    yAxis: [
      {
        type: "category",
        axisTick: {
          show: false,
        },
        data: timeStr,
      },
    ],
    series: [
      {
        name: "收益",
        type: "bar",
        stack: "Total",
        label: {
          show: true,
          position: "inside",
        },
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "lightgreen",
        },

        data: income,
      },
      {
        name: "支出",
        type: "bar",
        stack: "Total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "lightcoral",
        },
        data: expense,
      },
      {
        name: "结余",
        type: "bar",

        label: {
          show: true,
          position: "left",
        },
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "lightblue",
        },
        data: balance,
      },
    ],
  };
  myChart.setOption(option);
};
// 根据时间修改条形数据
const changeDist = () => {
  try {
    const newTime = getTime(value.value);
    dist({ date: newTime });
  } catch (error) {}
};
// 处理时间
function getTime(time) {
  let now = new Date(time);
  let y = now.getFullYear();
  let m = now.getMonth() + 1;
  let d = now.getDay();
  let h = now.getHours();
  let mm = now.getMinutes();
  let s = now.getSeconds();
  let ms = now.getMilliseconds();

  if (m < 10) {
    m = "0" + m;
  }
  if (d < 10) {
    d = "0" + d;
  }
  if (h < 10) {
    h = "0" + h;
  }
  if (mm < 10) {
    mm = "0" + mm;
  }
  if (s < 10) {
    s = "0" + s;
  }
  const times = `${y}-${m}-${d}T${h}:${mm}:${s}.${ms}Z`;
  return times;
}
//圆饼
const pie = async () => {
  const { data } = await getPie();
  console.log();
  let myChart = echarts.init(document.getElementById("main2"));
  let option = {
    title: {
      text: "大区营销图",
    },
    tooltip: {
      trigger: "item",
      formatter: function (a) {
        var str = a.name + "：" + a.value + " 万元";
        return str;
      },
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
          formatter: "{d}%",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "25",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data,
      },
    ],
  };
  myChart.setOption(option);
};
//词云图
const wordcloud = async () => {
  const { data } = await getWord();
  // console.log(data);
  let chart = echarts.init(document.getElementById("main3"));
  chart.setOption({
    series: [
      {
        type: "wordCloud",
        shape: "circle",
        // maskImage: maskImage,
        left: "center",
        top: "center",
        width: "70%",
        height: "80%",
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        layoutAnimation: true,
        textStyle: {
          fontFamily: "sans-serif",
          fontWeight: "bold",
          color: function () {
            return (
              "rgb(" +
              [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(",") +
              ")"
            );
          },
        },
        emphasis: {
          focus: "self",
          textStyle: {
            shadowBlur: 10,
            shadowColor: "#333",
          },
        },
        data,
      },
    ],
  });
};

//地图
const a = async () => {
  var chartDom = document.getElementById("main4");
  var myChart = echarts.init(chartDom);
  var option;
  const res = await getMap();
  // console.log(res.data);
  const data = res.data.data;
  const geoCoordMap = res.data.geoCoordMap;
  const convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        });
      }
    }
    return res;
  };
  option = {
    title: {
      text: "营收业绩图示（地图不支持国际化）",
      subtext: "data from PM25.in",
      sublink: "http://www.pm25.in",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    bmap: {
      center: [104.114129, 37.550339],
      zoom: 5,
      roam: true,
      mapStyle: {
        styleJson: [
          {
            featureType: "water",
            elementType: "all",
            stylers: {
              color: "#A3C8F6",
            },
          },
          {
            featureType: "land",
            elementType: "all",
            stylers: {
              color: "#f3f3f3",
            },
          },
          {
            featureType: "railway",
            elementType: "all",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "highway",
            elementType: "all",
            stylers: {
              color: "#F2FA02",
            },
          },
          {
            featureType: "highway",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "arterial",
            elementType: "geometry",
            stylers: {
              color: "#FD900A",
            },
          },
          {
            featureType: "arterial",
            elementType: "geometry.fill",
            stylers: {
              color: "#FD900A",
            },
          },
          {
            featureType: "poi",
            elementType: "all",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "green",
            elementType: "all",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "subway",
            elementType: "all",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "manmade",
            elementType: "all",
            stylers: {
              color: "#d1d1d1",
            },
          },
          {
            featureType: "local",
            elementType: "all",
            stylers: {
              color: "#d1d1d1",
            },
          },
          {
            featureType: "arterial",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "boundary",
            elementType: "all",
            stylers: {
              color: "#fefefe",
            },
          },
          {
            featureType: "building",
            elementType: "all",
            stylers: {
              color: "#FD900A",
            },
          },
          {
            featureType: "label",
            elementType: "labels.text.fill",
            stylers: {
              color: "#999999",
            },
          },
        ],
      },
    },
    series: [
      {
        name: "pm2.5",
        type: "scatter",
        coordinateSystem: "bmap",
        data: convertData(data),
        symbolSize: function (val) {
          return val[2] / 10;
        },
        encode: {
          value: 2,
        },
        label: {
          formatter: "{b}",
          position: "right",
          show: false,
        },
        emphasis: {
          label: {
            show: true,
          },
        },
      },
      {
        name: "Top 5",
        type: "effectScatter",
        coordinateSystem: "bmap",
        data: convertData(
          data
            .sort(function (a, b) {
              return b.value - a.value;
            })
            .slice(0, 6)
        ),
        symbolSize: function (val) {
          return val[2] / 10;
        },
        encode: {
          value: 2,
        },
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        label: {
          formatter: "{b}",
          position: "right",
          show: true,
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "#333",
        },
        emphasis: {
          scale: true,
        },
        zlevel: 1,
      },
    ],
  };
  option && myChart.setOption(option);
};

//左表格
const tab = async () => {
  const { data } = await getTab();
  console.log(data);
  state.tableData = data;
};
//右表格
const table = async () => {
  const { data } = await getTable();
  console.log(data);
};
</script>

<style scoped lang="scss">
.box {
  height: 300px;
  margin: 20px;
  display: flex;
  justify-content: space-between;
  .money {
    width: 240px;
    background: linear-gradient(90deg, #0ea5e9, #6366f1);
    height: 50px;
    border-radius: 5px;
    color: #fff;
    padding: 12px 20px;
    span {
      font-size: 25px;
    }
  }
  .day {
    width: 240px;
    height: 50px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .kuai {
      width: 5px;
      height: 20px;
      background-color: cornflowerblue;
    }
  }
  .spend {
    width: 240px;
    height: 50px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .kua {
      width: 5px;
      height: 20px;
      background-color: #e6a23c;
    }
  }
  .surplus {
    width: 240px;
    height: 50px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .ku {
      width: 5px;
      height: 20px;
      background-color: greenyellow;
    }
  }
}
.box2 {
  display: flex;
  margin: 20px;
  .card {
    width: 740px;
    height: 435px;
  }
  .card2 {
    width: 500px;
    height: 435px;
    margin-left: 20px;
    :deep(.el-calendar-table .el-calendar-day) {
      height: 55px;
    }
  }
}
.box5 {
  display: flex;
  margin: 20px;
  .box3 {
    width: 300px;
    .card3 {
      width: 300px;
      height: 240px;
    }
    .card4 {
      width: 300px;
      height: 260px;
      margin-top: 20px;
    }
  }
  .box4 {
    margin-left: 20px;
    flex: 1;
    width: 945px;
    height: 500px;
  }
}
.el-table {
  margin: 20px;
  width: 70%;
}
</style>
